<template>
  <a-layout style="min-height: 1000px">
    <a-layout-content style="background-color: #F2F2E6">
      <div style="padding-bottom: 20px; width: 70%; margin: auto">
        <v-card style="margin-top: 8vh" color="#FFFAF4">
<!--          页头-->
          <a-page-header
            style="border: 1px solid rgb(235, 237, 240)"
            title="编辑个人资料"
            @back="$router.go(-1)"
          />
          <v-row>
<!--            头像部分-->
            <v-col style="padding-left: 3vw; padding-top: 3vh; padding-bottom: 3vh" cols="3">
              <v-avatar :size="150" rounded @mouseenter="overlay = true" @mouseleave="overlay = false">
                <img :src="userInfo.profilepic" alt="">
                <v-overlay :absolute="true" :value="overlay">
                  <v-btn icon color="snow" @click="uploadPicture('avatar')">
                    <v-icon>mdi-camera</v-icon>
                  </v-btn>
                </v-overlay>
              </v-avatar>
            </v-col>
            <v-col>
<!--            用户名修改-->
              <div style="margin-top: 2vh; margin-bottom: 8vh">
                <div v-if="!displayNameEdit">
                  <p>
                <span style="font-family: 'Hiragino Sans GB',sans-serif; font-weight: bolder; font-size: 26px">
                  {{userInfo.nickname}}&nbsp;
                </span>
                    <a-button type="link" style="padding-left: 0; margin-right: 2vw" @click="displayNameEdit = true" class="float-lg-right">
                      <v-icon style="font-size: 20px" color="main_1">mdi-pencil</v-icon>
                      <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; color: #89B8CA">修改</span>
                    </a-button>
                  </p>
                </div>
                <div v-else style="font-family: BlinkMacSystemFont,sans-serif;">
                  <span style="font-size: 15px; font-weight: bolder">用户名</span>
                  &emsp;
                  <a-input ref="userNameInput" v-model="nickName" placeholder="不超过8个字符" :max-length="8" style="width: 20vw" :suffix="getLimitCount(nickName, 8)">
                    <a-icon slot="prefix" type="user" />
                  </a-input>
                  &emsp;
                  <v-btn color="main_1"
                         small
                         style="color: snow"
                         @click="updateNickName"
                         :disabled="nickName.split(' ').join('').length === 0">修改</v-btn>&nbsp;&nbsp;
                  <v-btn small @click="displayNameEdit=false">取消</v-btn>
                </div>
              </div>
<!--              邮箱-->
              <div >
                <v-row>
                  <v-col cols="2" style="position: relative">
                    <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; font-weight: bold; position: absolute; top: 50%; transform: translateY(-50%);">
                      邮箱
                    </span>
                  </v-col>
                  <v-col style="position: relative">
                    <div>
                      <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif;">
                        <span v-show="userInfo.email !== null && userInfo.email !== ''" style="position: absolute; top: 50%; transform: translateY(-50%);">
                          {{userInfo.email}}&emsp;
                        </span>
                    </span>
                    </div>
                  </v-col>
                </v-row>
              </div>
              <v-divider style="margin-right: 2vw; margin-top: 5vh; margin-bottom: 5vh"></v-divider>
<!--              性别-->
              <div >
                <v-row>
                  <v-col cols="2" style="position: relative">
                    <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; font-weight: bold; position: absolute; top: 50%; transform: translateY(-50%);">
                      性别
                    </span>
                  </v-col>
                  <v-col style="position: relative">
                    <div>
                      <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif;"
                             v-if="!displayGenderEdit">
                        <span v-show="userInfo.sex !== null && userInfo.sex !== ''" style="position: absolute; top: 50%; transform: translateY(-50%);">
                          {{userInfo.sex}}&emsp;
                        </span>
                        <a-button type="link" style="padding-left: 0; margin-right: 2vw" @click="displayGenderEdit = true" class="float-lg-right">
                          <v-icon style="font-size: 20px" color="main_1">mdi-pencil</v-icon>
                          <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; color: #89B8CA">修改</span>
                        </a-button>
                    </span>
                      <v-radio-group v-model="sexGroup" :column="false" v-else>
                        <v-radio
                          v-for="n in genders"
                          :key="n"
                          :label="n"
                          :value="n"
                          style="margin-right: 1vw"
                        ></v-radio>
                        &emsp;
                        <v-btn color="main_1"
                               small
                               style="color: snow"
                               @click="updateGneder"
                               :disabled="sexGroup === '' || sexGroup === null">修改</v-btn>&nbsp;&nbsp;
                        <v-btn small @click="displayGenderEdit=false">取消</v-btn>
                      </v-radio-group>
                    </div>
                  </v-col>
                </v-row>
              </div>
              <v-divider style="margin-right: 2vw; margin-top: 5vh; margin-bottom: 5vh"></v-divider>
<!--              一句话介绍-->
              <div>
                <v-row>
                  <v-col cols="2" style="position: relative">
                    <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; font-weight: bold; position: absolute; top: 50%; transform: translateY(-50%);">
                      自我介绍
                    </span>
                  </v-col>
                  <v-col style="position: relative">
                    <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif;"
                          v-if="!displayIntroEdit">
                      <span v-show="userInfo.introduction !== null && userInfo.introduction !== ''" style="position: absolute; top: 50%; transform: translateY(-50%);">
                        {{userInfo.introduction}}&emsp;
                      </span>
                      <a-button type="link" style="padding-left: 0; margin-right: 2vw" @click="displayIntroEdit = true" class="float-lg-right">
                      <v-icon style="font-size: 20px" color="main_1">mdi-pencil</v-icon>
                      <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; color: #89B8CA">修改</span>
                    </a-button>

                    </span>
                    <div v-else>
                      <a-input ref="userNameInput" v-model="introduction" placeholder="不超过15个字符" :max-length="15" style="width: 25vw" :suffix="getLimitCount(introduction, 15)">
                        <a-icon slot="prefix" type="message" />
                      </a-input>
                      &emsp;
                      <v-btn color="main_1"
                             small
                             style="color: snow"
                             @click="updateIntroduction">修改</v-btn>&nbsp;&nbsp;
                      <v-btn small @click="displayIntroEdit=false">取消</v-btn>
                    </div>
                  </v-col>
                </v-row>
              </div>
              <v-divider style="margin-right: 2vw; margin-top: 5vh; margin-bottom: 5vh"></v-divider>
<!--              居住地-->
              <div>
                <v-row>
                  <v-col cols="2" style="position: relative">
                    <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; font-weight: bold; position: absolute; top: 50%; transform: translateY(-50%);">
                      居住地
                    </span>
                  </v-col>
                  <v-col style="position: relative" cols="10">
                    <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; "
                          v-if="!displayAddressEdit">
                      <span v-show="userInfo.address !== null & userInfo.address !== ''" style="position: absolute; top: 50%; transform: translateY(-50%);">
                        {{userInfo.address}}&emsp;
                      </span>
                      <a-button type="link" style="padding-left: 0; margin-right: 2vw" @click="displayAddressEdit = true" class="float-lg-right">
                        <v-icon style="font-size: 20px" color="main_1">mdi-pencil</v-icon>
                        <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; color: #89B8CA">修改</span>
                    </a-button>
                    </span>
                    <div v-else style="width: 25vw">
                      <distpicker :province="Address.province"
                                    :city="Address.city"
                                    :area="Address.area"
                                    @province="onChangeProvince"
                                    @city="onChangeCity"
                                    @area="onChangeArea" ></distpicker>
                      <div style="margin-top: 2vh">
                        <v-btn color="main_1"
                               small
                               style="color: snow"
                               @click="updateAddress"
                               :disabled="Address.province === '' || Address.province === null || Address.province === '省'">修改
                        </v-btn>&emsp;
                        <v-btn small @click="displayAddressEdit=false">取消</v-btn>
                      </div>
                    </div>
                  </v-col>
                </v-row>
              </div>

              <v-divider style="margin-right: 2vw; margin-top: 5vh; margin-bottom: 5vh "></v-divider>
<!--              所在行业-->
              <div style="margin-bottom: 10vh">
                <div>
                  <v-row>
                    <v-col cols="2" style="position: relative">
                    <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; font-weight: bold; position: absolute; top: 50%; transform: translateY(-50%);">
                      所在行业
                    </span>
                    </v-col>
                    <v-col style="position: relative">
                    <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif;"
                          v-if="!displayOccuEdit">
                      <span v-show="userInfo.occupation !== null && userInfo.occupation !== ''" style="position: absolute; top: 50%; transform: translateY(-50%);">
                        {{userInfo.occupation}}&emsp;
                      </span>
                      <a-button type="link" style="padding-left: 0; margin-right: 2vw" @click="displayOccuEdit = true" class="float-lg-right">
                        <v-icon style="font-size: 20px" color="main_1">mdi-pencil</v-icon>
                        <span style="font-size: 15px; font-family: BlinkMacSystemFont,sans-serif; color: #89B8CA">修改</span>
                      </a-button>
                    </span>
                      <div v-else>
                        <a-auto-complete
                          :data-source="occupations"
                          style="width: 20vw"
                          v-model="occupation"
                          placeholder="选择你的行业"
                          :filter-option="filterOption"
                          />
                        &emsp;
                        <v-btn color="main_1"
                               small
                               style="color: snow"
                               @click="updateOccupation"
                               :disabled="occupations.indexOf(occupation) === -1">修改</v-btn>&nbsp;&nbsp;
                        <v-btn small @click="displayOccuEdit=false">取消</v-btn>
                      </div>
                    </v-col>
                  </v-row>
                </div>
              </div>
            </v-col>
          </v-row>
        </v-card>
      </div>
      <a-modal
        title="上传头像"
        :visible="cropperModel"
        width="950px"
        :footer="null"
        @cancel="cropperModel = false"
      >
        <cropper-image
          :Name="cropperName"
          @uploadImgSuccess = "handleUploadSuccess"
          ref="child">
        </cropper-image>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
    import request from "../utils/request";
    import CropperImage from "../components/CropperImage";
    import Distpicker from '../components/Distpicker/Distpicker'

    export default {
      name: "Personal_Info_Edit",
      components: {CropperImage, Distpicker},
      created() {
        this.load()

      },
      data () {
        return {
          genders: ['男', '女', '保密'],
          userInfo: {},
          overlay: false,
          //裁切图片参数
          cropperModel:false,
          cropperName:'',
          nickName: '',
          sexGroup: '',
          introduction: '',
          occupation: '',
          Address: {province: '', city: '', area: ''},
          occupations: ['暂无','保险业','采矿','能源','餐饮','宾馆','电讯业','房地产','服务','服装业','公益组织','广告业','航空航天','化学','健康','保健','建筑业','教育','培训','计算机','金属冶炼','警察','消防','会计','美容','媒体','出版','木材','造纸','零售','批发','农业','旅游业','司法','律师','司机','体育运动','学术研究','演艺','医疗服务','艺术','设计','银行','金融','因特网','音乐舞蹈','邮政快递','运输业','政府机关','机械制造','咨询'],
          displayNameEdit: false,
          displayGenderEdit: false,
          displayIntroEdit: false,
          displayOccuEdit: false,
          displayAddressEdit: false,
        }
        },

      methods:{
        getLimitCount(str, count){
          return str.length + '/' + count
        },
        // 加载个人信息
        load(){
          request.get('/user/getMyInfo').then(res => {
            if (res.code === '200'){
              this.userInfo = res.data
              this.nickName = res.data.nickname
              this.sexGroup = res.data.sex
              if (res.data.introduction)
                this.introduction = res.data.introduction
              this.occupation = res.data.occupation
              if (res.data.address){
                this.Address.province = res.data.address.split(' ')[0]
                this.Address.city = res.data.address.split(' ')[1]
                this.Address.area = res.data.address.split(' ')[2]
              }
            }
            else
              this.sendWarnMessage('用户信息加载失败，请刷新重试')
          })
        },
        update(){
          request.post('/user', this.userInfo).then(res => {
            if (res.code === '200')
              this.sendSuccessMessage('更新成功')
            else
              this.sendWarnMessage(res.msg)
            this.load()
          })
        },
        //封面设置
        uploadPicture(name){
          this.cropperName = name;
          this.cropperModel = true;
        },
        //图片上传成功后
        handleUploadSuccess (img){
          request.post('/user/updateAvatar', {"url": img}).then(res => {
            if (res.code === '200'){
              this.sendSuccessMessage('头像上传成功，审核通过后将为您自动更换')
              this.cropperModel = false
            }
            else this.sendWarnMessage('头像上传失败，请重试')
          })
        },
        async updateNickName(){
          this.userInfo.nickname = this.nickName
          await this.update()
          this.displayNameEdit = false
        },
        async updateGneder(){
          this.userInfo.sex = this.sexGroup
          await this.update()
          this.displayGenderEdit = false
        },
        async updateIntroduction(){
          this.userInfo.introduction = this.introduction
          await this.update()
          this.displayIntroEdit = false
        },
        async updateOccupation(){
          this.userInfo.occupation = this.occupation
          await this.update()
          this.displayOccuEdit = false
        },
        async updateAddress(){
          if (this.Address.city === '市')
            this.Address.city = ''
          if (this.Address.area === '区')
            this.Address.area = ''
          this.userInfo.address = this.Address.province + ' ' + this.Address.city + ' ' + this.Address.area
          await this.update()
          this.displayAddressEdit = false
        },
        filterOption(input, option) {
          return (
            option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
          );
        },
        onChangeProvince(data) {
          this.Address.province = data.value
          // console.log(this.Address.province)
        },
        onChangeCity(data) {
          this.Address.city = data.value
        },
        onChangeArea(data) {
          this.Address.area = data.value
        }
      }
    }
</script>

<style>
</style>
